Media Helpers
Layout support for media items
Aspect Ratios ( w : h )
.media__ratio--square
.media__ratio--full
.media__ratio--frame
.media__ratio--wide
.media__ratio--double
.media__ratio--triple
.media__ratio--triple-triple
.media__ratio--quad
.media__ratio--quad-double
Object Fit
.media__fit--fill
.media__fit--contain
.media__fit--cover
.media__fit--none
.media__fit--scale-down
Media Bleed
.media__bleed--full
.media__bleed--right.media__bleed--half
.media__bleed--left.media__bleed--half
Using these classes
These classes will fill available container width and include these styles in addition to the ratios.
.{class} {
width: 100%;
object-fit: cover;
}
The ratio class should be added to the media asset directly.